<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="topbar" :class="{'topbar-active':topBarActive}">
      <i class="iconfont iconfont-31liebiao left" />
      <div class="search">
        <i class="iconfont iconfont-google left" />
        <i class="iconfont iconfont-wxbsousuotuiguang search-logo" />
        <input type="text" placeholder="家电返场同价11.11">
      </div>
      <router-link v-if="!isLogin" to="/login" class="right">登录</router-link>
      <router-link v-else to="/me" class="right"><i class="iconfont iconfont-shouye1" /></router-link>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="swiper" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :data-i="image.categoryId" v-lazy="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航分类 -->
    <section class="category-list">
      <div v-for="(item,index) in categories" :key="index" @click="$router.push('/product-list')">
        <img :src="item.imgUrl"> <span>{{item.name}}</span>
      </div>
    </section>

    <!-- 底部分类 -->
    <section class="floor-list">
      <div class="floor-wrap" v-for="(item,index) in floorList" :key="index">

        <img class="floor-head" :src="item.headUrl">
        <div class="floor-content">
          <div class="floor-category" v-for="(ite,i) in item.list" :key="i">
            <p>{{ite.title}}</p>
            <p>{{ite.desc}}</p>
            <div class="floor-products">
              <img v-for="(it,k) in ite.products" :key="k" :src="it.imgUrl" :data-i="k" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部导航栏 -->
    <tabbar :active="0" />
  </div>
</template>

<script>
import tabbar from "../../components/tabbar.vue";

import { getSliders, getCategoryList, getFloorlist } from "../../api/index";

export default {
  name: "Home",
  components: {
    tabbar
  },
  data: function () {
    return {
      topBarActive: false,
      images: [],
      categories: [],
      floorList: [],
      isLogin: false
    }
  },
  methods: {
    // 顶部导航栏滚动变色
    pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop > 100 ? this.topBarActive = true : this.topBarActive = false
    },
    change() {
      this.isLogin = !this.isLogin;
    }
  },
  mounted: function () {
    // 加载轮播图
    getSliders(res => {
      this.images = res.data;
    });

    // 加载导航分类
    getCategoryList(res => {
      this.categories = res.data;
    });

    // 加载底部分类
    getFloorlist(res => {
      this.floorList = res.data;
    });

    // 监听滚动事件
    window.addEventListener('scroll', this.pageScroll);

    if (this.$store.state.userinfo === null) {
      this.isLogin = false
    } else {
      this.isLogin = true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";

.home {
  font-size: 32px;

  // 顶部导航栏（变红）
  .topbar-active {
    background-color: $red !important;
  }

  // 顶部导航栏
  .topbar {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    width: 100%;
    // background-color: $red;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;

    .left {
      font-size: 50px;
      margin: 0 25px;
      color: white;
    }

    .right {
      margin: 0 25px;
      color: white;
    }

    .search {
      display: flex;
      align-items: center;
      height: 60px;
      border-radius: 30px;
      background-color: white;
      flex: 1;

      .left {
        color: $red;
        font-size: 40px;
        height: 40px;
        border-right: 2px solid #a9a9a9;
        margin-left: 15px;
        margin-right: 0;
        padding-right: 10px;
      }

      .search-logo {
        font-size: 35px;
        margin: 0 10px;
      }

      input {
        font-size: 25px;
      }
    }
  }

  // 轮播图
  .swiper {
    height: 370px;

    img {
      width: 100%;
    }
  }

  // 导航分类
  .category-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 26px;
    font-size: 22px;

    div {
      display: flex;
      flex-direction: column;
      width: 20%;
      text-align: center;

      img {
        width: 80px;
        height: 80px;
        margin: 26px auto 16px auto;
      }
    }
  }

  // 底部分类
  .floor-list {
    width: 100%;
    padding-bottom: 100px;

    .floor-head {
      width: 100%;
      height: 80px;
      background: #f6f6f6;
    }

    .floor-content {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      width: 100%;
      @include boxSizing;

      .floor-category {
        width: 50%;
        padding: 20px;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
        @include boxSizing;

        &:nth-child(2n) {
          border-right: none;
        }

        p {
          font-size: 34px;
          color: #333;

          &:nth-child(2) {
            padding: 10px 0;
            font-size: 26px;
            color: $red;
          }
        }

        .floor-products {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          width: 100%;

          img {
            width: 130px;
            height: 130px;
          }
        }
      }
    }
  }
}
</style>
